<template>
	<view class="box">
		<u-form size="medium" ref="expressForm" :model="order" labelWidth="160rpx">
			<u-form-item label="发货方式" v-if="order.orderCommoditys.length > 1">
				<u-radio-group v-model="deliver_type" :disabled="disabled">
					<u-radio label="整单发货" :name="1"></u-radio>
					<u-radio label="分包裹发货" :name="2"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="收货人">{{ order.user_real_name }}</u-form-item>
			<u-form-item label="联系电话">{{ order.user_mobile }}</u-form-item>
			<u-form-item label="收货地址">{{ order.address }}</u-form-item>
			<u-form-item prop="express_company" label="选择物流">
				<!-- 	<u-input placeholder="选择物流" readonly v-model="order.express_company">
					<template slot="suffix">
						<u-icon name="arrow-down"></u-icon>
					</template>
				</u-input> -->
				<select-lay
					:value="order.express_company"
					name="express_company"
					placeholder="请选择"
					:showplaceholder="false"
					:options="expressList"
					:slabel="'name'"
					:svalue="'name'"
					@selectitem="getexpress"
				></select-lay>
				<!-- <el-select v-model="order.express_company" filterable placeholder="请选择物流">
					<el-option v-for="item in expressList" :key="item.id" :label="item.name" :value="item.name"></el-option>
				</el-select> -->
			</u-form-item>

			<u-form-item prop="logistics_no" label="物流单号"><u-input placeholder="请输入物流单号" v-model="order.logistics_no"></u-input></u-form-item>

			<u-form-item label="" v-if="deliver_type == 2">
				<view class="proSelect">
					<view class="phead">
						<view class="name">商品</view>
						<view class="count">数量</view>
						<view class="status">状态</view>
					</view>
					<u-checkbox-group v-model="selectlist">
						<view class="_ul">
							<view class="_li" v-for="(item, i) in order.orderCommoditys" :key="i">
								<view class="pro">
									<u-checkbox :name="item.id"></u-checkbox>
									<u-image width="80rpx" height="80rpx" :src="item.master" fit="fit"></u-image>
									<view class="txt">
										<text class="u-line-1">{{ item.name }}</text>
										<text class="u-line-1">{{ item.pvs_value_new }}</text>
									</view>
								</view>
								<view class="count">X{{ item.count }}</view>
								<view class="status done">{{ item.status }}</view>
								<!-- 	<view class="action">
									<text v-if="item.after_status == '1'">维权中</text>
									<text v-else-if="item.status == '待发货'">
										<el-button :type="item.isSelected ? 'primary' : ''" :disabled="item.status == '已发货' ? true : false" @click="selectOne(i)">选择</el-button>
									</text>
									<text v-else><u-button :disabled="true">选择</u-button></text>
								</view> -->
							</view>
						</view>
					</u-checkbox-group>
				</view>
			</u-form-item>

			<!-- <u-form-item><u-button type="primary" @click="saveData">确定发货</u-button></u-form-item> -->
		</u-form>

		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="close">取消</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="saveData">确定</u-button>
		</view>
		<u-picker :show="show" :columns="expressList" keyName="name" @confirm="getexpress"></u-picker>
	</view>
</template>
<script>
// import {getexpress} from '@/api/shop/freight';
// import {expressOrder, getOrderStoreList} from '@/api/shop/order';

export default {
	name: 'orderExpress',
	data() {
		return {
			isLoading: false,
			expressList: [],
			disabled: false,
			deliver_type: 1,
			selectlist: [],
			show: false,
			itemRules: {
				express_company: [
					{
						type: 'string',
						required: true,
						message: '请选择物流',
						trigger: ['blur', 'change']
					}
				],
				logistics_no: [
					{
						type: 'string',
						required: true,
						message: '请输入单号',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	props: {
		order: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	created() {
		this.getExpressAll();
		// //处理order商品原始数据

		//处理原始数据
		this.init();
	},

	computed: {
		comm_select_length: function() {
			return this.order.orderCommoditys.filter(_ => _.status == '待发货').length;
		}
	},
	methods: {
		getexpress(e,b) {
			this.order.express_company = b.name;
			// this.show = false;
		},
		//处理原始数据
		init() {
			let olen = this.order.orderCommoditys.length;
			let a = this.order.orderCommoditys.filter(_ => _.status == '待发货' && _.after_status == '3').length;
			let b = this.order.orderCommoditys.filter(_ => _.status == '待收货').length;
			if (a == olen) {
				//
				this.deliver_type = 1;
			}
			if (a < olen) {
				this.deliver_type = 2;
				this.disabled = true;
			}
			this.$nextTick(() => {
				this.$refs.expressForm.setRules(this.itemRules);
			});
		},
		//获取所有快递
		getExpressAll() {
			this.isLoading = true;
			uni.$u.http.get('/shop/freight/express', {custom:{id:8}}).then(res => {
				this.isLoading = false;
				this.expressList = res.msg;
			});
		},

		//保存数据(发货)
		saveData() {
			this.$refs.expressForm
				.validate()
				.then(res => {
					let _data = {};
					_data.id = this.order.id;
					_data.type = this.deliver_type;

					_data.logistics_no = this.order.logistics_no;
					_data.express_company = this.order.express_company;
					//如果部分发货,拼接发货的商品
					if (this.deliver_type == 1) {
						//全部发货
						//_data.cids = [];
						_data.status = '3'; //整单发货
					} else if (this.deliver_type == 2) {
						//部分发货
						let l = this.order.orderCommoditys.filter(_ => this.selectlist.indexOf(_.id) > -1);
						//校验是否有选择商品
						if (l.length == 0) {
							this.$alert('请选择需要发货的商品');
							return false;
						}
						_data.cids = []; //[1,2,3]
						l.forEach(e => {
							_data.cids.push({
								order_commodity_id: e.order_commodity_id,
								sku_id: e.sku_id,
								store_id: e.store_id
							});
						});
						_data.status = '7'; //整单发货
					}
					this.isLoading = true;
					uni.$u.http
						.put('/shop/order/saveOrderStatus', _data,{custom:{id:8}})
						.then(res => {
							this.isLoading = false;
							this.$emit('success');
						})
						.catch(e => {
							this.isLoading = false;
						});
				})
				.catch(err => {});
		},
		close() {
			this.$emit('close', 'showExpress');
		}
	}
};
</script>

<style lang="scss" scoped>
.u-form-item {
	margin-bottom: 15px;
}
.footer {
	height: 80rpx;
}
//选择商品
.proSelect {
	width: 100%;
	border: 1px solid #dcdfe6;
	//margin-bottom: 10px;

	.phead {
		background: #f4f6f8;
		font-weight: 700;
		display: flex;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #dcdfe6;

		.name {
			flex: 1;
			padding-left: 10px;
		}

		.store {
			width: 180px;
			text-align: center;
		}

		.count {
			width: 80px;
			text-align: center;
		}

		.status {
			width: 80px;
			text-align: center;
		}

		.action {
			width: 100px;
			text-align: center;
		}
	}

	._ul {
		margin: 0;
		max-height: 210px;
		overflow-y: auto;
		width: 100%;
		._li {
			display: flex;
			cursor: pointer;
			line-height: 40px;
			padding: 10px 0;
			font-size: 13px;
			border-bottom: 1px solid #dcdfe6;
			padding-left: 10px;

			&:last-child {
				border-bottom: none;
			}

			.pro {
				display: flex;
				flex: 1;

				.txt {
					display: flex;
					flex-direction: column;
					padding-left: 10px;
					flex: 1;
					line-height: 18px;
					align-items: center;

					.mark {
						color: #f56c6c;
						background: #f2f4f6;
						display: table;
						border-radius: 5px;
						padding: 0 3px;
						margin-right: 3px;
					}
				}
			}

			.store {
				width: 180px;
				text-align: center;
			}

			.count {
				width: 80px;
				text-align: center;
			}

			.status {
				width: 80px;
				text-align: center;

				&.done {
					color: #67c23a;
				}

				&.none {
					color: #f56c6c;
				}
			}

			.action {
				width: 100px;
				text-align: center;
			}
		}
	}
}

.box {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
}
</style>
